<template>
    <el-dialog
            custom-class="hc-deliver-section-detail"
            :visible="visible"
            :modal="false"
            :show-close="false"
            @close="onClose">
        <div>作业作答进度表</div>
        <el-carousel :autoplay="false" arrow="always" class="hc-deliver-section-detail__carousel" height="100%" trigger="click">
            <el-carousel-item v-for="(o,index) in Math.ceil(members.length/pageNum)" :key="index"
                              class="hc-deliver-section-detail__carousel-item">
                <div class="hc-deliver-section-detail__carousel-item-box"
                     v-for="(p, subIndex) in Math.ceil(members.slice(index*pageNum,(index+1)*pageNum).length/colNum)" :key="subIndex">
                    <div v-for="(row, leftSubIndex) in members.slice(index*pageNum,(index+1)*pageNum).slice(subIndex*colNum,(subIndex+1)*colNum)"
                         :key = "leftSubIndex+row.memberNumber"
                         class="hc-deliver-section-detail__carousel-item-box--row">
                        <span class="hc-deliver-section-detail__carousel-item-box--row-left" :title="row.memberNumber">{{row.memberNumber.slice(-5)}}</span>
                        <span class="hc-deliver-section-detail__carousel-item-box--row-mid">{{row.realname}}</span>
                        <div class="hc-deliver-section-detail__carousel-item-box--row-progress-bar">
                            <el-progress :stroke-width="10"
                                         :percentage="Math.floor((row.hasAnswered/questionNum)*100)"></el-progress>
                        </div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <el-button class="el-icon-sort hc-deliver-section-detail__sort-button" title="切换排序规则" @click="switchSort" size="mini"></el-button>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            visible: {
                default() {
                    return false
                },
                type: Boolean
            },
            data: {
                default() {
                    return {}
                }
                // type:Array
            }
        },
        name: 'sectionDetail',
        data() {
            return {
                colNum: 9,
                pageNum: 18,
                intId: 0,
                sortBy: 'memberNumber',
                tag: 'plus'
            }
        },
        computed: {
            members() {
                return this.$store.getters.getMember(this.data[0]).sort(this.compare(this.sortBy))
            },
            questionNum() {
                return this.data[1]
            }
        },
        beforeDestroy(){
            if (this.intId !== 0)
                clearInterval(this.intId)
        },
        watch: {
            members: function (cur, old) {
                console.log(cur)
            },
            visible: function (cur, old) {
                if (cur === true)
                    setTimeout(() => {
                        this.intId = setInterval(() => {
                            this.$emit('updateData')
                        }, 10000)
                    }, 10000)
            }
        },
        methods: {
            switchSort() {
                if (this.sortBy === 'memberNumber') {
                    this.sortBy = 'hasAnswered'
                    this.tag = 'decent'
                } else {
                    this.sortBy = 'memberNumber'
                    this.tag='plus'
                }
            },
            onClose() {
                if (this.IntId !== 0)
                    clearInterval(this.intId)
                this.$emit('close')
            },
            compare(property) {
                let tag = this.tag;
                return function (obj1, obj2) {
                    if (tag === 'plus') {
                        return obj1[property] - obj2[property];
                    }else return -(obj1[property] - obj2[property])
                }
            },
        }
    }
</script>

<style scoped>

</style>
